import React from "react";
import { FieldChangeData, LCGUI } from "../../../json-schema/LCGUI";
import { Control } from "../../../json-schema/SchemaTypes";
import { IotSJController } from "./IotSJController";
import { ConfigType } from "../../../designer/right/ConfigContent";
export const IotSJStyleConfig: React.FC<ConfigType<IotSJController>> = ({
  controller,
}) => {
  const { style } = controller.getConfig()!;
  const onFieldChange = (fieldChangeData: FieldChangeData) => {
    const { dataFragment } = fieldChangeData;
    controller.update(dataFragment!);
  };

  const schema: Control = {
    type: "grid",
    config: { columns: 0 },
    key: "style",
    children: [
      {
        key: "backgroundColor",
        type: "color-picker",
        label: "背景颜色",
        value: style?.backgroundColor,
        config: {
          showText: true,
        },
      },
      /*   {
        key: "fontSize",
        type: "number-input",
        label: "字号",
        value: style?.fontSize,
        config: { min: 1 },
      },
      {
        key: "fontWeight",
        type: "number-input",
        label: "加粗",
        value: style?.fontWeight || 400,
        config: {
          min: 100,
          max: 900,
          step: 100,
        },
      },
      {
        key: "color",
        type: "color-picker",
        label: "颜色",
        value: style?.color,
        config: {
          showText: true,
        },
      }, */
      {
        key: "borderColor",
        type: "color-picker",
        label: "描边颜色",
        value: style?.borderColor,
        config: {
          showText: true,
        },
      },
    ],
  };

  return <LCGUI schema={schema} onFieldChange={onFieldChange} />;
};
